<template>
  <div class="about-config">
    <el-card class="config-card">
      <div slot="header" class="card-header">
        <h3>关于我们配置</h3>
      </div>

      <el-form :model="formData" :rules="rules" ref="formRef" label-width="100px">
        <!-- 关于我们介绍 -->
        <el-form-item label="公司介绍" prop="introduction">
          <el-input
            type="textarea"
            :rows="6"
            v-model="formData.introduction"
            placeholder="请输入公司介绍内容">
          </el-input>
        </el-form-item>

        <!-- 关于我们图片 -->
        <el-form-item label="公司图片" prop="images">
          <div class="image-list">
            <el-upload
              action="/api/upload"
              list-type="picture-card"
              :file-list="formData.images"
              :on-preview="handlePreview"
              :on-remove="handleImageRemove"
              :on-success="handleImageSuccess"
              :before-upload="beforeImageUpload"
              multiple>
              <i class="el-icon-plus"></i>
              <div slot="tip" class="el-upload__tip">建议尺寸: 800px * 600px，格式：JPG/PNG</div>
            </el-upload>
          </div>
        </el-form-item>

        <!-- 条款与条件 -->
        <el-form-item label="条款与条件" prop="terms">
          <div class="editor-wrapper">
            <el-input
              type="textarea"
              :rows="10"
              v-model="formData.terms"
              placeholder="请输入条款与条件内容">
            </el-input>
            <div class="format-tip">支持纯文本格式</div>
          </div>
        </el-form-item>

        <!-- 隐私政策 -->
        <el-form-item label="隐私政策" prop="privacy">
          <div class="editor-wrapper">
            <el-input
              type="textarea"
              :rows="10"
              v-model="formData.privacy"
              placeholder="请输入隐私政策内容">
            </el-input>
            <div class="format-tip">支持纯文本格式</div>
          </div>
        </el-form-item>

        <!-- 提交按钮 -->
        <el-form-item>
          <el-button type="primary" @click="submitForm">保存配置</el-button>
          <el-button @click="resetForm">重置</el-button>
        </el-form-item>
      </el-form>
    </el-card>

    <!-- 图片预览对话框 -->
    <el-dialog :visible.sync="previewVisible" append-to-body>
      <img width="100%" :src="previewUrl" alt="预览图片">
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: 'AboutUsConfig',

  data() {
    return {
      formData: {
        introduction: '',
        images: [],
        terms: '',
        privacy: ''
      },
      previewVisible: false,
      previewUrl: '',
      rules: {
        introduction: [
          { required: true, message: '请输入公司介绍', trigger: 'blur' }
        ],
        terms: [
          { required: true, message: '请输入条款与条件', trigger: 'blur' }
        ],
        privacy: [
          { required: true, message: '请输入隐私政策', trigger: 'blur' }
        ]
      }
    }
  },

  created() {
    // 在这里获取初始数据
    this.getAboutUsData()
  },

  methods: {
    // 获取关于我们页面数据
    getAboutUsData() {
      // 这里添加获取数据的API调用
      // 示例数据
      this.formData = {
        introduction: '公司介绍示例内容...',
        images: [],
        terms: '条款与条件示例内容...',
        privacy: '隐私政策示例内容...'
      }
    },

    // 图片上传前验证
    beforeImageUpload(file) {
      const isImage = file.type.startsWith('image/')
      const isLt5M = file.size / 1024 / 1024 < 5

      if (!isImage) {
        this.$message.error('只能上传图片文件！')
        return false
      }
      if (!isLt5M) {
        this.$message.error('图片大小不能超过 5MB！')
        return false
      }
      return true
    },

    // 图片上传成功
    handleImageSuccess(res, file) {
      this.formData.images.push({
        name: file.name,
        url: res.url
      })
      this.$message.success('图片上传成功')
    },

    // 删除图片
    handleImageRemove(file) {
      const index = this.formData.images.findIndex(item => item.url === file.url)
      this.formData.images.splice(index, 1)
    },

    // 预览图片
    handlePreview(file) {
      this.previewUrl = file.url
      this.previewVisible = true
    },

    // 提交表单
    submitForm() {
      this.$refs.formRef.validate((valid) => {
        if (valid) {
          // 这里添加提交到后端的逻辑
          console.log('提交的表单数据：', this.formData)
          this.$message.success('配置保存成功')
        }
      })
    },

    // 重置表单
    resetForm() {
      this.$refs.formRef.resetFields()
      this.formData.images = []
      this.$message.success('表单已重置')
    }
  }
}
</script>

<style scoped>
.about-config {
  padding: 20px;
}

.config-card {
  margin: 0 auto;
}

.editor-wrapper {
  position: relative;
}

.format-tip {
  font-size: 12px;
  color: #909399;
  margin-top: 5px;
}

.image-list {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.el-upload__tip {
  line-height: 1.2;
  margin-top: 5px;
  color: #909399;
}

/* 自定义上传按钮样式 */
.el-upload--picture-card {
  width: 150px;
  height: 150px;
  line-height: 150px;
}

.el-upload--picture-card i {
  font-size: 28px;
  color: #8c939d;
}

/* 预览图片样式 */
.el-upload-list--picture-card .el-upload-list__item {
  width: 150px;
  height: 150px;
}

/* 表单项间距 */
.el-form-item {
  margin-bottom: 30px;
}
</style>
